<template>
  <el-row>
    <div class="hot">
      <el-row>
        <el-col :span="8" @click="toDynamics()">
          <el-row>
            <div class="my-icon" style="background-color:#00ff4d;">
              <el-icon><Promotion /></el-icon>
            </div>
          </el-row>
          <el-row>
            &nbsp;&nbsp;&nbsp;动态
          </el-row>
        </el-col>
        <el-col :span="8" >
          <el-row>
<!--            <el-avatar :size="60" src="/img/hot.webp" />-->
            <div class="my-icon" style="background-color:#ff7676;"><el-icon><Histogram /></el-icon></div>
          </el-row>
          <el-row class="txt">
            &nbsp;&nbsp;&nbsp;热门
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div class="partition">
      <el-row>
        <el-col :span="2" v-for="(item,index) in partitionList" key="item.id" @click="toChannel(item.partitionId,item.partitionName)">
          <el-tag size="large">{{item.partitionName}}</el-tag>
        </el-col>
      </el-row>
    </div>


  </el-row>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {getPartitionList} from "@/api/api.js";
import {useRouter} from "vue-router";
import emitter from "@/utils/emitter.js";
const mockPartition = ref([
  {
    id:1,
    name:'动画'
  },
  {
    id:2,
    name:'娱乐'
  },
  {
    id:3,
    name:'鬼畜'
  },
  {
    id:4,
    name:'舞蹈'
  },
  {
    id:5,
    name:'科技'
  },
  {
    id:6,
    name:'美食'
  },
  {
    id:7,
    name:'汽车'
  },
  {
    id:8,
    name:'运动'
  },
  {
    id:9,
    name:'游戏'
  },
  {
    id:10,
    name:'音乐'
  },
  {
    id:11,
    name:'影视'
  },
  {
    id:12,
    name:'知识'
  },
  {
    id:13,
    name:'资讯'
  },
  {
    id:14,
    name:'生活'
  },
  {
    id:15,
    name:'时尚'
  },
])
const partitionList = ref([])

onMounted(async()=>{
    const res = await getPartitionList();
    console.log(res)
    if(res.code === 200){
      partitionList.value = res.data;
    }
})

const router = useRouter()
const toChannel = (pId,pName) => {

  console.log(router.currentRoute.value)
  let fullPath = router.currentRoute.value.fullPath;
  if(fullPath.includes("/channel")){
    router.push({
      path:"/channel",
      replace:true,
      query:{
        pId
      }
    })
  }else {
    router.push({
      path:"/channel",
      query:{
        pId
      }
    })
  }

  emitter.emit('changeChannel', {pId,pName})
}

const toDynamics = () => {
  router.push({
    path:"/dynamics"
  })
}
</script>
<style scoped>
.partition .el-col{
  width: 60px;
  margin-left: 30px;
  margin-bottom: 15px;
}
.el-tag--large{
  padding: 0 20px;
  cursor: pointer;
}
.hot{
  height: 100px;
  width: 200px;

}
.partition{
  width: 1180px;

}
.my-icon{
  width: 60px;height: 60px;border-radius: 50%;background-color: #86bcff;font-size: 30px;color:white;
  display: flex; justify-content: center;align-items: center;
}
</style>